<!--Author: W3layouts
Author URL: http://w3layouts.com
License: Creative Commons Attribution 3.0 Unported
License URL: http://creativecommons.org/licenses/by/3.0/
-->
<!DOCTYPE HTML>
<html>
<head>
<title>酒店预定</title>
<link href="static/shopcat/css/style.css" rel="stylesheet" type="text/css" media="all"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="Flash Registration Form  Responsive, Login form web template, Sign up Web Templates, Flat Web Templates, Login signup Responsive web template, Smartphone Compatible web template, free webdesigns for Nokia, Samsung, LG, SonyEricsson, Motorola web design" />
<!--web-fonts-->
<script src="static/shopcat/js/jquery.min.js"></script>
<script>$(document).ready(function(c) {
	$('.close').on('click', function(c){
		$('.product-section').fadeOut('slow', function(c){
	  		$('.product-section').remove();
		});
	});
});
</script>
<script>$(document).ready(function(c) {
	$('.close1').on('click', function(c){
		$('.product1').fadeOut('slow', function(c){
	  		$('.product1').remove();
		});
	});
});
</script>
<script>$(document).ready(function(c) {
	$('.close2').on('click', function(c){
		$('.product2').fadeOut('slow', function(c){
	  		$('.product2').remove();
		});
	});
});
</script>
	<style>
		body {
			margin: 0px;
			padding: 0px;
			background-image: url(static/shopcat/images/sly.jpg);
			background-repeat: round;
			/*
              背景附着
                fixed  背景图像相对于窗体固定
                scoll 默认值，背景图像相对于元素固定，也就是说当元素内容滚动时背景图像不会跟着滚动，
                因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动
                local 背景图像相对于元素内容固定，也就是说当元素随元素滚动时背景图像也会跟着滚动，因为背景图像总是要跟着内容
              */
			background-attachment: fixed;
			/*背景透明*/
			/*最后一个a代表透明 取值 0~1*/
			/*background: rgba(0, 0, 0, 0.1)*/

			/*背景缩放*/
			/*  auto:背景图像的真实大小
                cover:将背景图像等比缩放到完全覆盖容器，背景图像有可能溢出容器，溢出部份隐藏
                contain： 将背景图像等比缩放到宽度或高度与容器的宽度或高度相等，背景图像始终被包含在容器内。
             */
			/*一般只改一个参数 另一个等比例缩放，防止缩放失真扭曲*/
			background-size: 1600px;
			/*background-size: auto;*/
			/*background-size: contain;*/
		}
	</style>
<body>
	<!---header--->
		<div class="header">
			<h1 id="title">酒店预定</h1>
		</div>
		<!---header--->
		<!---main--->
			<div class="main">
				<div  class="main-section">
					<div id="shopCar">
						<!-- 购物车信息 -->
					</div>
					<div id="total" class="product-bottom">
						<h3>总价 : <span id="totalPrice"></span></h3>
						<a href="hotelOrderPage.html" style="text-align: center">付 &nbsp;&nbsp; 款</a>
						<div class="clear">
						</div>
					</div>
				</div>
			</div>

		<!---main--->

		<script>
            $(function () {
                $.ajax({
                    //提交数据的类型 POST GET
                    type:"POST",
                    //提交的网址
                    url:"shopCar",
                    success:function(returnData){
                        if(returnData.length==0){
                            $("#title").html("<p style='color: greenyellow '>您还没有预定酒店</p><br><a style='color: red ;cursor:hand'  href='rooms-grid.html'>点击预定</a>")
                            $("#total").hide();
						}
                        if(returnData == "请登录"){
                            $("#title").html("<p style='color: greenyellow '>您还没有登录</p><br><a style='color: red ;cursor:hand'  href='login1.html'>点击登录</a>")
                            $("#total").hide();
                        }
                        var prices = 0;
                        $.each(returnData,function (i, value) {
                            //获取到达日期
                            var arrival = new Date(value.arrivalDate);
                            //获取日期月份
                            var arrivalMonth =(arrival.getMonth() + 1).toString();
                            //获取日期天数
                            var arrivalDay = (arrival.getDate()).toString();
                            //获取离开日期
                            var departure = new Date(value.departureDate);
                            //获取日期月份
                            var departureMonth =(departure.getMonth() + 1).toString();
                            //获取日期天数
                            var departureDay = (departure.getDate()).toString();
							prices += value.roomPrice+value.pledge;
							$("#shopCar").append("<div class=\"product-section\" style=\"margin-top: 30px\">\n" +
                                "\t\t\t\t\t\t<div class=\"product-top\">\n" +
                                "\t\t\t\t\t\t\t<div class=\"product-left\">\n" +
                                "\t\t\t\t\t\t\t\t<img style=\"margin-top: 20px\" src=\"static/images/rooms/"+value.pic+"\">\n" +
                                "\t\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t\t<div class=\"product-right\">\n" +
                                "\t\t\t\t\t\t\t\t<h2 style=\"text-align: center\">"+value.hotelName+"</h2>\n" +
                                "\t\t\t\t\t\t\t\t<h5 style=\"text-align: center\">"+value.location+"</h5>\n" +
                                "\t\t\t\t\t\t\t\t<p style=\"text-align: center\">\n" +
                                "\t\t\t\t\t\t\t\t\t入住:"+arrivalMonth+"月"+arrivalDay+"日|离开:"+departureMonth+"月"+departureDay+"日\n" +
                                "\t\t\t\t\t\t\t\t</p>\n" +
                                "\t\t\t\t\t\t\t\t<p style=\"text-align: center\">\n" +
                                "\t\t\t\t\t\t\t\t\t每晚:"+value.roomPrice+"元|押金:"+value.pledge+"元\n" +
                                "\t\t\t\t\t\t\t\t</p>\n" +
                                "\t\t\t\t\t\t\t\t<p style=\"text-align: center\">\n" +
                                "\t\t\t\t\t\t\t\t\t人数:"+value.num+"人房|类型:"+value.roomType+value.roomID+"\n" +
                                "\t\t\t\t\t\t\t\t</p>\n" +
                                "\t\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t<div class=\"product-right1\" style=\"margin: 15px 10px; float: right\">\n" +
                                "\t\t\t\t\t\t\t<p>价格:"+(value.roomPrice+value.pledge)+"元<p>\n" +
                                "\t\t\t\t\t\t\t<a href='deleteShopCar?id="+value.id+"' class=\"close\"></a>\n" +
                                "\t\t\t\t\t\t</div>\n" +
                                "\t\t\t\t\t\t<div class=\"clear\"></div>\n" +
                                "\t\t\t\t\t</div>")
                        });
                        $("#totalPrice").html(prices)
                    },
                    //调用出错执行的函数
                    error: function(responseText){
                        //请求出错处理
                        console.error(responseText);
                    }
                });
            })
		</script>
</body>
</html>